<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#all {
				text-align: center;
			}
			
			#motai {
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.5);
				position: fixed;
				top: 0;
				display: none;
			}
			
			#winner {
				width: 200px;
				height: 50px;
				padding: 100px;
				background-color: aliceblue;
				border: 3px groove darkgrey;
				margin: 150px auto;
			}
		</style>
	</head>

	<body>
		<div id="all">
			<canvas id="cvs" width="500px" height="500px"></canvas>
		</div>
		<div id="motai">
			<div id="winner">
				<p id="win"></p>
				<input type="button" id="return" value="再来一局" />
				<input type="button" id="back" value="取消" />
			</div>
		</div>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var cvs = document.getElementById("cvs");
			var ctx = cvs.getContext("2d");

			var Qiziarr = [];
			for(var i = 0; i <= 15; i++) {
				Qiziarr[i] = [];
				for(var j = 0; j <= 15; j++) {
					Qiziarr[i][j] = 0;
				}
			}
			var Qizi1 = true;
			//画棋盘，线
			function drawline() {
				//绘制棋盘
				ctx.clearRect(0, 0, cvs.width, cvs.height);
				ctx.beginPath();
				var grd = ctx.createRadialGradient(cvs.width / 2, cvs.height / 2, 200, cvs.width / 2, cvs.height / 2, 500);
				grd.addColorStop(0, "blanchedalmond");
				grd.addColorStop(1, "#DEB887");
				ctx.fillStyle = grd;
				ctx.fillRect(0, 0, cvs.width, cvs.height);
				ctx.rect(10, 10, 480, 480);
				ctx.stroke();
				ctx.beginPath();
				ctx.rect(25, 25, 450, 450);
				ctx.stroke();
				//绘制线
				for(var i = 0; i < 15; i++) {
					//纵向的线
					ctx.beginPath();
					ctx.moveTo(i * 30 + 25, 25);
					ctx.lineTo(i * 30 + 25, cvs.height - 25);
					ctx.stroke();
					//横向的线
					ctx.beginPath();
					ctx.moveTo(25, i * 30 + 25);
					ctx.lineTo(cvs.width - 25, i * 30 + 25);
					ctx.stroke();
				}
			}
			drawline();
			drawQizi();

			//画棋子  白棋子1;黑棋子2;
			$("#cvs").on("click", function(event) {
				var x = event.offsetX;
				var y = event.offsetY;

				//判断鼠标点击的位置是否在坐标上
				for(var i = 0; i <= 15; i++) {
					for(var j = 0; j <= 15; j++) {
						var dianx = i * 30 + 25;
						var diany = j * 30 + 25;
						var a = Math.abs(dianx - x);
						var b = Math.abs(diany - y);
						var c = Math.sqrt(a * a + b * b);
						if(c <= 15) {
							//判断该坐标是否有棋子，若有则下
							if(Qiziarr[i][j] == 0) {
								Qiziarr[i][j] = Qizi1 ? 1 : 2;
								drawQizi();
								win(i, j);
								Qizi1 = !Qizi1;
							}
							break;
						}
					}
				}
			})
			//下棋时改变鼠标的样式
			$("#cvs").on("mousemove", function() {
				var x = event.offsetX;
				var y = event.offsetY;
				for(var i = 0; i <= 15; i++) {
					for(var j = 0; j <= 15; j++) {
						var dianx = i * 30 + 25;
						var diany = j * 30 + 25;
						var a = Math.abs(dianx - x);
						var b = Math.abs(diany - y);
						var c = Math.sqrt(a * a + b * b);
						if(c <= 15) {
							if(Qiziarr[i][j] == 0) {
								$(this).css("cursor", "pointer")
							} else {
								$(this).css("cursor", "")
							}
							break;
						}
					}
				}
			})

			function drawQizi() {
				drawline();
				for(var i = 0; i < Qiziarr.length; i++) {
					for(var j = 0; j < Qiziarr[i].length; j++) {
						ctx.beginPath();
						ctx.arc(i * 30 + 25, j * 30 + 25, 13, 0, 2 * Math.PI);
						var grd1 = ctx.createRadialGradient(i * 30 + 25, j * 30 + 25, 13, i * 30 + 25, j * 30 + 25, 2)
						if(Qiziarr[i][j] == 1) {
							//画白棋子
							grd1.addColorStop(0, '#d1d1d1');
							grd1.addColorStop(1, '#f9f9f9');

						} else if(Qiziarr[i][j] == 2) {
							//画黑棋子
							grd1.addColorStop(0, '#0a0a0a');
							grd1.addColorStop(1, '#636766');
						}
						ctx.fillStyle = grd1;
						ctx.fill();
					}
				}
			}
			//黑白的输赢算法
			function win(x, y) {
				var num = Qizi1 ? 1 : 2;
				var count = 0;
				//横向五子连接
				for(var i = 0; i <= 15; i++) {
					if(Qiziarr[i][y] == num) {
						count++;
					} else if(Qiziarr[i][y] != 0) {
						count = 0;
					}
				}
				if(count == 5) {
					$("#win").html(Qizi1 ? "❤❤❤白棋获得胜利，you are win!!❤❤❤" : "❤❤❤黑棋获得胜利，you are win!!❤❤❤");
					$("#motai").fadeToggle("500");
				} else {
					count = 0;
				}
				//纵向五子连接
				for(var i = 0; i <= 15; i++) {
					if(Qiziarr[x][i] == num) {
						count++;
					} else if(Qiziarr[x][i] != 0) {
						count = 0;
					}
				}
				if(count == 5) {
					$("#win").html(Qizi1 ? "❤❤❤白棋获得胜利，you are win!!❤❤❤" : "❤❤❤黑棋获得胜利，you are win!!❤❤❤");
					$("#motai").fadeToggle("500");
				} else {
					count = 0;
				}
				//正倾斜向五子连接
				for(var i = Math.abs(x - y), k = 0; i < 15; i++, k++) {
					if(x > y) {
						if(Qiziarr[i][k] == num) {
							count++;
						} else if(Qiziarr[i][k] != 0) {
							count = 0;
						}
					} else {
						if(Qiziarr[k][i] == num) {
							count++;
						} else if(Qiziarr[k][i] != 0) {
							count = 0;
						}
					}
				}
				if(count == 5) {
					$("#win").html(Qizi1 ? "❤❤❤白棋获得胜利，you are win!!❤❤❤" : "❤❤❤黑棋获得胜利，you are win!!❤❤❤");
					$("#motai").fadeToggle("500");
				} else {
					count = 0;
				}
				//反倾斜五子连接
				if(x + y<15) {
					for(var i = x + y, k = 0; i>0; k++, i--) {
						if(Qiziarr[i][k] == num) {
							count++;
						} else if(Qiziarr[i][k] != 0) {
							count = 0;
						}
					}
				}else if(x + y<15){
					for(var i = 15, k = x+y-15; i>0; k++, i--) {
						if(Qiziarr[i][k] == num) {
							count++;
						} else if(Qiziarr[i][k] != 0) {
							count = 0;
						}
					}
				}
				if(count == 5) {
						$("#win").html(Qizi1 ? "❤❤❤白棋获得胜利，you are win!!❤❤❤" : "❤❤❤黑棋获得胜利，you are win!!❤❤❤");
						$("#motai").fadeToggle("500");
					} else {
						count = 0;
					}

			}
			$("#return").on("click",function(){
				location.href="index.html";
			})
			$("#back").on("click", function() {
				$("#motai").fadeToggle("500");
			})
		</script>
	</body>

</html>